import React, {FC, useEffect, useState} from 'react';
import {View, Image, StyleSheet, useWindowDimensions} from 'react-native';
import {ImageSlider, DataType} from '../../components/slidePager';
import ArticleDetailStore from '../../stores/ArticleDetailStore';
import {observer} from 'mobx-react';
type PropsType = {};
const Images: FC<PropsType> = observer(() => {
  const {width: SCREEN_WIDTH} = useWindowDimensions();
  const [showHeight, setShowHeight] = useState<number>(400);
  const {images} = ArticleDetailStore.detail;
  const data: DataType[] = images?.map(item => {
    return {img: item} as DataType;
  });
  console.log('Images data:', JSON.stringify(data));
  useEffect(() => {
    if (images?.length > 0) {
      Image.getSize(images[0], (width: number, height: number) => {
        const h = (SCREEN_WIDTH * height) / width;
        setShowHeight(h);
      });
    }
  }, [images, SCREEN_WIDTH]);

  if (!images?.length || !data) {
    return null;
  }
  return (
    <View style={styles.root}>
      <ImageSlider
        data={data}
        autoPlay={false}
        closeIconColor="white"
        caroselImageStyle={{width: SCREEN_WIDTH, height: showHeight}}
        indicatorContainerStyle={styles.containerImg}
        activeIndicatorStyle={styles.activeDot}
        inActiveIndicatorStyle={styles.inActiveDot}
      />
    </View>
  );
});
const styles = StyleSheet.create({
  root: {
    width: '100%',
    paddingBottom: 30,
  },
  containerImg: {
    bottom: -40,
  },
  activeDot: {
    width: 6,
    height: 6,
    backgroundColor: '#FF2442',
    borderRadius: 3,
  },
  inActiveDot: {
    width: 6,
    height: 6,
    backgroundColor: '#c0c0c0',
    borderRadius: 3,
  },
});
export default Images;
